<script setup lang="ts">
import { defineProps } from 'vue'

const {title, info, icon, vertical} = defineProps({
  title: {
    required: true,
    type: String
  },
  info: {
    required: true,
    type: String
  },
  icon: {
    required: true,
    type: String
  },
  vertical: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <a-flex vertical class="coure-ing">
    <a-flex>
      <a-image
          width="5rem"
          :src="icon"
          :preview="false"
      />
      <div style="margin-left: 1rem">
        <h3 style="font-weight: bold;font-size: 1.2rem">{{title}}</h3>
        <p style="font-size: .9rem">{{info}}</p>
      </div>
    </a-flex>
    <section :class="{'section-lay':true,vertical:vertical}">
      <slot></slot>
    </section>
  </a-flex>
</template>

<style scoped lang="scss">
  .coure-ing{
    width: 100%;
    height: auto;
    margin-top: 1.5rem;
    padding: .72rem 1.8rem;
    border: 0.5px solid #aaa;
    border-radius: 15px;
  }
  .section-lay{
    display: flex;
    width: 100%;
    height: auto;
  }
  .vertical{
    flex-direction: column;
  }
</style>